<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品页面</title>
    <!-- 引入样式 -->
    <!--    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
    <!--    <link rel="stylesheet" type="text/css" href="./static/css/elementuifont.css"/>-->
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="../../static/js/Vue-2.6.12.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../static/js/axios.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <style>
        .el-row {
            margin-bottom: 20px;

        &
        :last-child {
            margin-bottom: 0;
        }

        }
        .el-col {
            border-radius: 4px;
        }

        .grid-content {
            border-radius: 4px;
            min-height: 36px;
        }

        .row-bg {
            padding: 10px 0;
            background-color: #f9fafc;
        }

        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }

        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }

        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }

        .el-drawer {
            overflow: scroll;
        }
    </style>
</head>
<body>
<div id="app">

    <el-row>
        <el-col :span="3">
            <div class="grid-content"></div>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="3">
            <div class="grid-content"></div>
        </el-col>
        <el-col :span="18">
            <el-form :inline="true" :model="searForm" class="demo-form-inline">
                <el-form-item>
                    <el-input clearable v-model="searForm.id" placeholder="id"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input clearable v-model="searForm.name" placeholder="商品名"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="findList">查询</el-button>
                    <el-button type="success" @click="dialogFormVisible = true,template = {}">新增</el-button>
                </el-form-item>
            </el-form>

            <el-table
                    :data="dataList"
                    border
                    style="width: 100%">
                <el-table-column
                        prop="id"
                        label="id"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="商品名"
                        width="180">
                </el-table-column>
                <el-table-column
                        label="商品预览图"
                        width="180">
                    <template slot-scope="scope">
                        <el-image
                                style="width: 100px; height: 100px"
                                :src="scope.row.image"
                                fit="scale-down"></el-image>
                    </template>
                </el-table-column>
                <el-table-column
                        label="状态"
                        width="180">
                    <template slot-scope="scope">
                        <el-switch
                                style="display: block"
                                v-model="scope.row.status"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                active-text="删除"
                                inactive-text="未删除"
                                active-value="1"
                                inactive-value="0"
                                @change="changeStatus">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column
                        label="操作">
                    <template slot-scope="scope">
                        <el-link type="primary" @click="updateSpu(scope.row.id)">还原</el-link>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="findList"
                    @current-change="findList"
                    :current-page.sync="currentPage"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size.sync="pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </el-col>
        <el-col :span="3">
            <div class="grid-content bg-purple"></div>
        </el-col>
    </el-row>
</div>
</body>

<script type="text/javascript">
    new Vue({
        el: "#app",
        data: {
            dataList: [],
            currentPage: 1,
            pagesize: 20,
            total: 100,
            searForm: {}
        },
        created() {
            this.findList()
        },
        methods: {
            findList() {
                this.searForm.isDelete="1"
                axios.post(`/spu/findconditionpage.do?startpage=${this.currentPage}&pagesize=${this.pagesize}`, this.searForm).then((res) => {
                    this.dataList = res.data.records
                    this.total = res.data.total
                })
            },
            save() {
                let id = this.template.id
                let action = id ? 'update' : 'save';
                axios.post(`/template/${action}.do`, this.template).then((res) => {
                    if (res.data.code == "200") {
                        this.dialogFormVisible = false
                        this.$message({
                            type: 'success',
                            message: res.data.msg
                        });
                        this.findList()
                    } else {
                        this.$message.error(res.data.msg)
                    }
                })
            },
            updateSpu(id){

            }
        }
    })
</script>
</html>